.s-dashed-dynamic-border {
  --dash-size-with-tranparent: calc(var(--dash-size) * 2);

  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: var(--size);
  // 背景的四个值分别为四个边框：上、下、左、右
  background:
    linear-gradient(90deg, var(--color) 50%, transparent 50%) 0 0 repeat-x,
    linear-gradient(90deg, var(--color) 50%, transparent 50%) 0 100% repeat-x,
    linear-gradient(180deg, var(--color) 50%, transparent 50%) 0 0 repeat-y,
    linear-gradient(180deg, var(--color) 50%, transparent 50%) 100% 0 repeat-y;
  background-size:
    var(--dash-size-with-tranparent) var(--size),
    var(--dash-size-with-tranparent) var(--size),
    var(--size) var(--dash-size-with-tranparent),
    var(--size) var(--dash-size-with-tranparent);
}

.s-dashed-dynamic-border--animate {
  animation: s-dashed-dynamic-border-animation var(--speed) linear infinite;
}

.s-dashed-dynamic-border--hover {
  &:hover {
    animation: s-dashed-dynamic-border-animation var(--speed) linear infinite;
  }
}

@keyframes s-dashed-dynamic-border-animation {
  100% {
    background-position:
      var(--dash-size-with-tranparent) 0,
      calc(var(--dash-size-with-tranparent) * -1) 100%,
      0 calc(var(--dash-size-with-tranparent) * -1),
      100% var(--dash-size-with-tranparent);
  }
}
